<template>
	<div class="maintenance-order">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addOrder">新增维修任务</el-button>
				<el-input v-model="searchName" placeholder="搜索维修单名称" style="width: 200px; margin-left: 10px"
					clearable />
				<el-input v-model="searchDevice" placeholder="搜索设备名称" style="width: 200px; margin-left: 10px"
					clearable />
				<el-select v-model="searchResult" placeholder="筛选维修结果" style="width: 180px; margin-left: 10px"
					clearable>
					<el-option label="正常" value="正常" />
					<el-option label="异常" value="异常" />
					<el-option label="待复检" value="待复检" />
				</el-select>
			</div>

			<el-table :data="filteredOrders" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="orderId" label="维修单编号" sortable></el-table-column>
				<el-table-column prop="orderName" label="维修单名称" sortable></el-table-column>
				<el-table-column prop="deviceName" label="设备名称" sortable></el-table-column>
				<el-table-column prop="repairResult" label="维修结果" sortable>
					<template #default="scope">
						<el-tag
							:type="scope.row.repairResult === '正常' ? 'success' : (scope.row.repairResult === '异常' ? 'danger' : 'warning')">
							{{ scope.row.repairResult }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="repairPerson" label="维修人员" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template #default="scope">
						<el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
						<el-button size="small" type="primary" @click="editOrder(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteOrder(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="维修任务" width="600px">
			<el-form :model="currentOrder" label-width="120px">
				<el-form-item label="维修单编号">
					<el-input v-model="currentOrder.orderId" />
				</el-form-item>
				<el-form-item label="维修单名称">
					<el-input v-model="currentOrder.orderName" />
				</el-form-item>
				<el-form-item label="设备编号">
					<el-input v-model="currentOrder.deviceId" />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="currentOrder.deviceName" />
				</el-form-item>
				<el-form-item label="品牌">
					<el-input v-model="currentOrder.brand" />
				</el-form-item>
				<el-form-item label="保修日期">
					<el-date-picker v-model="currentOrder.warrantyDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="维修完成日期">
					<el-date-picker v-model="currentOrder.repairDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="验收日期">
					<el-date-picker v-model="currentOrder.acceptDate" type="date" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="维修结果">
					<el-select v-model="currentOrder.repairResult">
						<el-option label="正常" value="正常" />
						<el-option label="异常" value="异常" />
						<el-option label="待复检" value="待复检" />
					</el-select>
				</el-form-item>
				<el-form-item label="维修人员">
					<el-input v-model="currentOrder.repairPerson" />
				</el-form-item>
				<el-form-item label="验收人员">
					<el-input v-model="currentOrder.acceptPerson" />
				</el-form-item>
				<el-form-item label="单据状态">
					<el-select v-model="currentOrder.status">
						<el-option label="进行中" value="进行中" />
						<el-option label="已完成" value="已完成" />
						<el-option label="已关闭" value="已关闭" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentOrder.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveOrder">保存</el-button>
			</template>
		</el-dialog>

		<!-- 详情弹窗 -->
		<el-dialog v-model="detailVisible" title="维修任务详情" width="600px">
			<el-descriptions :column="2" border>
				<el-descriptions-item label="维修单编号">{{ currentOrder.orderId }}</el-descriptions-item>
				<el-descriptions-item label="维修单名称">{{ currentOrder.orderName }}</el-descriptions-item>
				<el-descriptions-item label="设备编号">{{ currentOrder.deviceId }}</el-descriptions-item>
				<el-descriptions-item label="设备名称">{{ currentOrder.deviceName }}</el-descriptions-item>
				<el-descriptions-item label="品牌">{{ currentOrder.brand }}</el-descriptions-item>
				<el-descriptions-item label="保修日期">{{ currentOrder.warrantyDate }}</el-descriptions-item>
				<el-descriptions-item label="维修完成日期">{{ currentOrder.repairDate }}</el-descriptions-item>
				<el-descriptions-item label="验收日期">{{ currentOrder.acceptDate }}</el-descriptions-item>
				<el-descriptions-item label="维修结果">{{ currentOrder.repairResult }}</el-descriptions-item>
				<el-descriptions-item label="维修人员">{{ currentOrder.repairPerson }}</el-descriptions-item>
				<el-descriptions-item label="验收人员">{{ currentOrder.acceptPerson }}</el-descriptions-item>
				<el-descriptions-item label="单据状态">{{ currentOrder.status }}</el-descriptions-item>
				<el-descriptions-item label="备注" :span="2">{{ currentOrder.remark }}</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<el-button @click="detailVisible = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const orders = ref([
	{ orderId: 'REP001', orderName: '灌装机维修单', deviceId: 'DEV001', deviceName: '灌装机', brand: '品牌A', warrantyDate: '2024-01-01', repairDate: '2024-06-01', acceptDate: '2024-06-02', repairResult: '正常', repairPerson: '张三', acceptPerson: '李四', status: '已完成', remark: '更换部件' },
	{ orderId: 'REP002', orderName: '压片机维修单', deviceId: 'DEV002', deviceName: '压片机', brand: '品牌B', warrantyDate: '2023-12-01', repairDate: '2024-06-05', acceptDate: '2024-06-06', repairResult: '异常', repairPerson: '王五', acceptPerson: '赵六', status: '进行中', remark: '故障未排除' },
])

for (let i = 3; i <= 15; i++) {
	orders.value.push({
		orderId: `REP00${i}`,
		orderName: `设备${i}维修单`,
		deviceId: `DEV00${i}`,
		deviceName: `设备${i}`,
		brand: `品牌${String.fromCharCode(65 + (i % 5))}`,
		warrantyDate: `2024-0${i % 12 + 1}-01`,
		repairDate: `2024-06-${i}`,
		acceptDate: `2024-06-${i + 1}`,
		repairResult: i % 3 === 0 ? '正常' : (i % 3 === 1 ? '异常' : '待复检'),
		repairPerson: `维修员${i}`,
		acceptPerson: `验收员${i}`,
		status: i % 2 === 0 ? '已完成' : '进行中',
		remark: '例行维护'
	})
}

const searchName = ref('')
const searchDevice = ref('')
const searchResult = ref('')
const dialogVisible = ref(false)
const detailVisible = ref(false)
const currentOrder = ref({})

// 筛选
const filteredOrders = computed(() =>
	orders.value.filter(o =>
		(!searchName.value || o.orderName.includes(searchName.value)) &&
		(!searchDevice.value || o.deviceName.includes(searchDevice.value)) &&
		(!searchResult.value || o.repairResult === searchResult.value)
	)
)

// 新增
const addOrder = () => {
	currentOrder.value = { orderId: '', orderName: '', deviceId: '', deviceName: '', brand: '', warrantyDate: '', repairDate: '', acceptDate: '', repairResult: '', repairPerson: '', acceptPerson: '', status: '', remark: '' }
	dialogVisible.value = true
}

// 编辑
const editOrder = (row) => {
	currentOrder.value = { ...row }
	dialogVisible.value = true
}

// 保存
const saveOrder = () => {
	if (!currentOrder.value.orderId || !currentOrder.value.orderName) {
		ElMessage.error('维修单编号和维修单名称不能为空')
		return
	}
	const index = orders.value.findIndex(o => o.orderId === currentOrder.value.orderId)
	if (index >= 0) {
		orders.value[index] = { ...currentOrder.value }
		ElMessage.success('维修任务已更新')
	} else {
		orders.value.push({ ...currentOrder.value })
		ElMessage.success('维修任务已新增')
	}
	dialogVisible.value = false
}

// 删除
const deleteOrder = (row) => {
	ElMessageBox.confirm('确认删除该维修任务吗？', '提示', { type: 'warning' })
		.then(() => {
			orders.value = orders.value.filter(o => o.orderId !== row.orderId)
			ElMessage.success('维修任务已删除')
		})
		.catch(() => { })
}

// 详情
const viewDetail = (row) => {
	currentOrder.value = { ...row }
	detailVisible.value = true
}
</script>

<style scoped>
.maintenance-order .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
